<template>
	<view class="card_box">
		<view class="d_header"></view>
		<view class="g_list">
			<view>
				<view class="g_list_item" :class="item.cardState == 0 ? '' : 'guishibac'"
					v-for="(item, index) in cardArr" :key="index">
					<view class="g_list_item_box">
						<view class="account_box">
							<text class="g_txt g_top_txt">{{dangTxt(empName, index)}}</text>
							<!-- <image @click="changeEye" :src="showEye ? '/static/images/home/eye_icon.png' : '/static/images/home/eye-open.png'" class="eye_icon"></image> -->
						</view>
						<text class="g_btn"
							:class="item.cardState == 0 ? '' : 'guishi'">{{statusToTxt(item.cardState)}}</text>
					</view>
					<view class="g_list_item_box g_top_car">
						<text class="g_txt">卡号：{{item.cardNo}}</text>
					</view>
					<view>
						<view class="wallet_box" v-for="(ite, ind) in item.wallets" :key="ind">
							<text class="g_txt">
								{{ite.walletType == 1 ? '现金账户余额' : ite.walletType == 3 ? '热水账户余额' : ite.walletType == 2 ? '补助账户余额' : ''}}：{{ite.balance.toFixed(2)}}
							</text>
						</view>
						<view v-if="hasCash" class="wallet_box">
							<view class="in-box">
								<text class='btn_txt' @click="pathPaymentList(item)">消费记录</text>
								<text class='btn_txt' @click="cashHandle(item)">退卡</text>
							</view>
						</view>
					<!-- 	<view v-if="hasSet" class="wallet_box">
							<text class="g_txt">
								每日消费限额：{{item.limitAmount?item.limitAmount.toFixed(2):"未设置"}}
							</text>
							<text class="set_limit" @click="setLimit(item)">
								设置＞
							</text>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<mcModal :isShow="showMcModal" :content="content" :title="title" @cancel="showMcModal = false" :inp="false"
			@ok='ok' okCor='#e74c3c' okBtn='确认'></mcModal>
	</view>
</template>

<script>
	let _this 
	import {
		cash,
		queryStudentCardBalance,
		getOpenId
	} from '../../common/api/index.js';
	import {
		WX_APPID
	} from '../../common/utils/config.js'
	import mcModal from '../../components/custom-modal/custom-modal.vue'
	export default {
		onLoad: function(option) {
			_this = this
			this.cardArr = [...JSON.parse(decodeURIComponent(option.arrObj))]
			console.log(this.cardArr)
			this.empName = option.empName
			this.hasSet = option.hasSet
			this.hasCash = option.hasCash
		},
		components: {
			mcModal
		},
		data() {
			return {
				cardArr: [],
				empName: '',
				showEye: false,
				hasSet: null,
				hasCash: null,
				showMcModal: false,
				content: '',
				title: '温馨提示'
			}
		},
		computed: {
			statusToTxt(status) {
				return function(status) {
					if (status == 0) {
						return "正常使用"
					} else if (status == 1) {
						return "已挂失"
					} else if (status == 2) {
						return "挂失已补办"
					}
				}
			},
			dangTxt(name, index) {
				return function(name, index) {
					if (this.cardArr.length == 1) {
						return `${name}的卡账户`
					} else if (this.cardArr.length == 2) {
						if (index == 0) {
							return `${name}的卡账户一`
						} else {
							return `${name}的卡账户二`
						}
					} else if (this.cardArr.length == 3) {
						if (index == 0) {
							return `${name}的卡账户一`
						} else if (index == 1) {
							return `${name}的卡账户二`
						} else if (index == 2) {
							return `${name}的卡账户三`
						}
					}
				}
			}
		},
		methods: {
			changeEye() {
				this.showEye = !this.showEye
			},
			ok(){},
			cancel(){ this.showMcModal = false },
			setLimit(card) {
				uni.navigateTo({
					url: '../../pages/student/setting?itemObj=' + encodeURIComponent(JSON.stringify(card))
				})
			},
			pathPaymentList(item) {
				uni.navigateTo({
					url: '/pagePayment/recode/xf_list?orgId=' + item.orgId + '&empId=' + item.empId
				})
			},
			//点击退卡按钮
			cashHandle(card) {
				this.cardData = card
				this.showMcModal = true
				this.content = '退卡后将无法在售奶机刷卡消费，奶卡账户余额将在7个工作日内退到当前微信账户余额，确定要退卡？'
				this.title = '危险操作提示'
				this.ok = () => this.confirmCash()
			},
			// 确认退卡
			confirmCash() {
				this.showMcModal = false
				this._queryStudentCardBalance(this.cardData, true)
			},
			// 发起退卡
			_cash(item, openId) {
				let milkWallets = item.wallets.filter(i => {
					return i.walletType === 1
				})
				cash({
					orgId: item.orgId,
					empName: this.empName,
					// amount: 0.3,
					amount: milkWallets[0].balance,
					walletId: milkWallets[0].walletId,
					empId: item.empId,
					payerAccount: openId,
					cardNo: item.cardNo
				}).then(res => {
					uni.hideLoading()
					if (res.code == 0) {
						this.content = '退卡成功'
						this.ok = () => {
							uni.navigateBack({
								delta: 2
							})
						}
					} else {
						this.content = '退卡失败：' + res.msg
						this.ok = () => this.cancel()
					}
					this.title = '温馨提示'
					this.showMcModal = true
				})
			},
			// 获取openId
			_getOpenId(card) {
				uni.showLoading({
					title: '退卡提交中...',
					icon: "none"
				})
				// #ifdef MP-WEIXIN
				wx.login({
					provider: 'weixin',
					success: function(loginRes) {
						getOpenId({
							code: loginRes.code,
							xappId: WX_APPID
						}).then(res => {
							if(res.resultCode == 0){
								let openId = res.openid
								_this._cash(card, openId)
							}else {
								uni.hideLoading()
								uni.showToast({
									icon: "none",
									title: res.resultMsg
								})
							}
						}).catch(err => {
							uni.hideLoading()
							console.log(err)
						})
					}
				});
				// #endif
				// #ifndef MP-WEIXIN
				uni.showLoading({
					title: '退卡暂不支持当前平台'
				})
				// #endif 
			},
			//校验当前余额
			_queryStudentCardBalance(card, isCash) {
				uni.showLoading({
					title: '加载中...'
				})
				let s_userId = uni.getStorageSync('s_userId')
				queryStudentCardBalance({
					userId: s_userId,
					queryCard: true,
					queryWallet: true,
					orgId: card.orgId,
					bindType: 3
				}).then(res => {
					if (res.code == 0) {
						let cashCard = res.data.students[0].students.filter(i => {
							return i.empId === card.empId
						})[0].cards.filter(j => {
							return j.cardNo === card.cardNo
						})
						if (isCash) this._getOpenId(cashCard[0])
					} else {
						uni.hideLoading()
					}
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss">
	.card_box {
		.d_header {
			width: 100vw;
			height: 390rpx;
			background-image: url('');
			background-size: 100%;
			background-repeat: no-repeat;
			display: flex;
			justify-content: center;
		}

		.g_list {
			position: absolute;
			top: 108rpx;
			width: 92%;
			left: 4%;
			background: #F6F6FF;
			box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.09);
			border-radius: 8rpx 8rpx 0 0;

			.g_list_item {
				padding: 20rpx;
				margin: 16rpx;
				background: #fff;

				.g_list_item_box {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					line-height: 50rpx;

					.account_box {
						display: flex;
						flex-direction: row;
						align-items: center;

						.g_top_txt {
							font-size: 38rpx;
							font-family: "PingFangSC-Heavy, PingFang SC";
							font-weight: 600;
							color: #333333;
						}

						.eye_icon {
							width: 20px;
							height: 20px;
							margin-left: 14rpx;
						}
					}

					.g_btn {
						font-size: 28rpx;
						font-family: "PingFang-SC-Medium, PingFang-SC";
						font-weight: 500;
						color: #55C976;
					}

					.guishi {
						color: #999999;
					}
				}

				.g_top_car {
					margin-top: 20rpx;
				}

				.wallet_box {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
				}

				.in-box {
					display: flex;
					flex: 1;
					justify-content: space-around;
					align-items: center;

					.btn_txt {
						background: #185AFF;
						border-radius: 8rpx;
						padding: 10rpx 30rpx;
						font-size: 24rpx;
						font-family: "PingFang-SC-Medium, PingFang-SC";
						font-weight: 500;
						color: #FFFFFF;
					}
				}
			}

			.guishibac {
				background: #ddd;
			}
		}
	}

	.g_txt,
	.set_limit {
		font-size: 30rpx;
		font-family: "PingFangSC-Medium, PingFang SC";
		font-weight: 500;
		color: #6B707A;
		line-height: 50rpx;
	}

	.set_limit {
		color: #185AFF;
	}
</style>
